<template>
  <!-- 导航栏 -->
  <van-nav-bar
    title="基本资料"
    left-text="返回"
    left-arrow
    @click-left="back"
  />

  <!-- 头像 -->
  <div class="avatar">
    <van-image
      width="100"
      height="100"
      round
      lazy-load
      :src="business.avatar_text"
    />
  </div>

  <!-- 表单 -->
  <van-form @submit="profile">
     <van-field
      v-model="business.nickname"
      name="nickname"
      label="昵称"
      placeholder="请输入昵称"
      :rules="[{required: true, message: '请输入昵称'}]"
     />

     <van-field
      v-model="business.mobile"
      name="mobile"
      label="手机号"
      placeholder="请输入手机号"
      :rules="[
        {required: true, message: '请输入手机号码'},
        {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确'}
      ]"
     />

     <van-field
      v-model="business.email"
      name="email"
      label="邮箱"
      placeholder="请输入邮箱"
      :rules="[
        {required: true, message: '请输入邮箱'},
        {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确'}
      ]"
     />

     <van-field
        v-model="business.password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
     />

     <van-field name="gender" label="性别">
      <template #input>
        <van-radio-group v-model="business.gender" direction="horizontal">
          <van-radio name="0">保密</van-radio>
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </template>
     </van-field>

     <van-field
      v-model="business.region_text"
      is-link
      readonly
      name="region"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="AreaShow = true"
     />
     <!-- 弹出框 -->
     <van-popup v-model:show="AreaShow" position="bottom">
      <!-- 地区组件 -->
      <van-area
        v-model="code"
        :area-list="areaList"
        @cancel="AreaShow = false"
        @confirm="AreaConfirm"
      />
     </van-popup>


     <!-- 文件上传 -->
     <van-field name="avatar" label="上传头像">
      <template #input>
        <van-uploader v-model="avatar" :max-count="1" />
      </template>
     </van-field>

     <div style="width:50%;margin:2em auto;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
     </div>
  </van-form>


</template>

<script setup>
  //引入地区数据
  import { areaList } from '@vant/area-data';

  const { proxy } = getCurrentInstance()

  let business = proxy.$cookies.get('business') ? proxy.$cookies.get('business') : {}
  
  business = reactive(business)

  // console.log(business);

  let avatar = ref([{
    url:business.avatar_text
  }])

  let AreaShow = ref(false)

  let code = ref(business.district || business.city || business.province)

  const back = () => proxy.$router.go(-1)

  const AreaConfirm = ({selectedOptions}) => 
  {
    AreaShow.value = false

    business.region_text = selectedOptions.map((item) => item.text).join('/')
    
    var list = selectedOptions.map((item) => item.value)

    code.value = list.pop()
  }

  const profile = async (values) => 
  {
    // 组装数据
    var data = {
      id:business.id,
      nickname: values.nickname,
      mobile: values.mobile,
      gender:values.gender,
      email:values.email,
    }

    //密码不为空 则修改密码
    if(values.password)
    {
      data.password = values.password
    }

    //地区码
    if(code.value)
    {
      data.code = code.value
    }
    

    //头像
    if(values.avatar[0].file)
    {
      data.avatar = values.avatar[0].file
    }
    // console.log(data.avatar);
    // return false;

    if(data.avatar)
    {
      var result = await proxy.$UPLOAD({
        url:'/business/profile',
        params:data
      })
    }else
    {
      var result = await proxy.$POST({
        url:'/business/profile',
        params:data
      })
    }

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }else
    {
      proxy.$success({        
        message:result.msg,
        onClose:() =>
        {
          //更新成功返回上一页面
          proxy.$router.go(-1)
        }
      })
    }


  }

</script>

<style>
  .avatar{
    text-align: center;
    margin:3em 0em;
  }
</style>